<!--
 * @Description:  标题组件
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-03-16 09:01:37
 * @LastEditors: zhou
 * @LastEditTime: 2022-08-27 20:05:37
-->
<template>
    <div class="pro-title2 w-text flexcbh">
        <div v-if="title_type=='title'" class="title flexrbc">
            <div class="flexrsc">
                <div class="title_icon inline-block"></div>
                <div class="label">{{ label }}</div>
                <slot name="title_slot"></slot>
            </div>
            <div v-if="is_more" class="more pointer flexrbc" :style="{ color: more_color }" @click="onMore">
                {{ more }}
                <div v-if="show_icon" class="icon"></div>
            </div>
        </div>
        <div v-else-if="title_type=='slot'" class="title flexrbc">
            <div class="flex">
                <div class="title_icon inline-block"></div>
                <div class="label">{{ label }}</div>
            </div>
            <slot name="right_nav"/>
        </div>
        <div v-else-if="title_type == 'btn'" class="flexrbc">
            <div class="btn flex">
                <div
                    class="btn_item pointer"
                    :class="[item.id == cut_id ? 'active' : '']"
                    v-for="item in btn_list"
                    :key="item.id"
                    @click="onItem(item.id)"
                >
                    <span class="pro-bgcolor-text">{{item.name}}</span>
                </div>
            </div>

            <div v-if="is_more" class="more pointer flexrbc" :style="{ color: more_color }" @click="onMore">
                {{ more }}
                <div v-if="show_icon" class="icon"></div>
            </div>
        </div>
        <div v-else-if="title_type == 'none'" class="flexrbc">
            <div></div>

            <div v-if="is_more" class="more pointer flexrbc" :style="{ color: more_color }" @click="onMore">
                {{ more }}
                <div v-if="show_icon" class="icon"></div>
            </div>
        </div>
        <div v-show="has_line" class="line flexrb">
            <div class="line1"></div>
            <div class="line2 fx1"></div>
            <div class="line1"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ProTitle2",
    props: {
        label: {
            type: String,
            default: "详情",
        },
        more: {
            type: String,
            default: "",
        },
        show_icon: {
            type: Boolean,
            default: false,
        },
        more_color: {
            type: String,
            default: "rgba(255, 255, 255, 1);",
        },
        title_type: {
            type: String,
            default: "title",
        },
        btn_list: {
            type: Array,
            default: () => [],
        },
        has_line: {
            type: Boolean,
            default: true
        },
        is_more: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            cut_id: 0,
        };
    },
    computed: {},
    methods: {
        tabComp(id) {
            this.$emit("tabComp", id);
        },
        onClick() {
            this.$emit("detail");
        },
        onShow() {
            this.$emit("onShow");
        },
        onMore() {
            this.$emit("on_more");
        },
        onItem(id) {
            this.cut_id = id
        }
    },
};
</script>

<style lang="scss" scoped>
.pro-title2 {
    margin-bottom: vh(25);
    width: 100%;
    .title {
        .title_icon {
            height: vh(24);
            width: vw(4);
            background: url("~@/assets/images/proview/title_icon.png") no-repeat
                0 0;
            background-size: 100% 100%;
            margin-right: vw(14);
        }
        .label {
            font-weight: 700;
            font-size: vw(20);
            background: linear-gradient(180deg, #ffffff 0%, #2ef7fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .more {
            color: #ffffff;
            font-size: vw(14);
            .icon {
                width: vw(10);
                height: vh(18);
                margin-left: vw(5);
                background: url("~@/assets/images/proview/detail.png") no-repeat
                    0 0;
                background-size: 100% 100%;
            }
        }
    }

    .btn {
        .btn_item {
            padding: vh(8) vw(16);
            border: 2px solid rgba(22, 159, 196, 0.25);
            font-size: vw(16);
            background: #002440;   // #16171F
            margin-right: vw(20);
        }
        .active {
            font-weight: 700;
            background: rgba(22, 159, 196, 0.2);
        }
    }

    .line {
        margin-top: vh(16);
        .line1 {
            width: vw(8);
            border-bottom: 1px solid #2ef7fc;
        }
        .line2 {
            margin: 0 vw(3);
            border-bottom: 1px solid #083957;
        }
    }
}
</style>
